<!-- 项目详情 -->
<template>
	<view>
		<u-sticky>
			<view class="m-bg-w">
				<u-tabs :list="list1" @click="click" :activeStyle='activeStyle' :inactiveStyle='inactiveStyle'
					lineColor='#0E5642' :lineWidth='30' :lineHeight='2' :scrollable='false'></u-tabs>
			</view>
		</u-sticky>
		<view class="u-m-t-20 m-bg-w">
			<view class="m-mg-lr">
			<view class="u-p-t-30 top-1">
				<view class="u-flex u-flex-items-center u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">楼盘动态</view>
				</view>
				<u-parse :content="length ? room.propertiesnews[0].content : ''" v-if='length'></u-parse>
				<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="150" v-else></list-empty>
				
			</view>
			<view class="top-2">
				<view class="u-flex u-flex-items-center u-p-t-20 u-m-b-20">
					<view class="shuxian"></view>
					<view class="shuxian-text">购房补贴</view>
				</view>
				<u-parse :content="length ? room.propertiesnews[0].yj_content : ''" v-if='length'></u-parse>
				<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="150" v-else></list-empty>
			</view>
			<view class="u-flex u-flex-items-center u-m-b-20 top-3">
				<view class="shuxian"></view>
				<view class="shuxian-text">销售信息</view>
			</view>
			<view class="m-bg-w">
				<view class="u-flex u-flex-between u-p-20" :class="index < 11 ? 'u-border-bottom' : ''"
					v-for="(item,index) in list" :key='index'>
					<view class="c2">
						{{item.name}}
					</view>
					<view class="c1 u-line-1">
						{{item.name1}}
					</view>
				</view>
			</view>
			<view class="u-flex u-flex-items-center u-m-b-20 top-4">
				<view class="shuxian"></view>
				<view class="shuxian-text">预售许可</view>
			</view>
			<view class="m-bg-w">
				<view class="u-flex u-flex-between u-p-20" :class="index < 1 ? 'u-border-bottom' : ''"
					v-for="(item,index) in datayu" :key='index'>
					<view class="c2">
						{{item.name}}
					</view>
					<view class="c1 u-line-1">
						{{item.name1}}
					</view>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '楼盘动态',
				},{
					name: '购房补贴',
				}, {
					name: '销售信息',
				}, {
					name: '预售许可'
				}],
				activeStyle: {
					color: '#0e5642',
					transform: 'scale(1.05)',
					fontSize: '22rpx'
				},
				inactiveStyle: {
					color: '#606266',
					fontSize: '22rpx'
				},
				topArr: [],
				list: [],
				datayu: [],
				length: 0,
				room: {}
			};
		},
		onHide() {
			uni.removeStorageSync('room');
		},
		onLoad() {
			try {
				let room = JSON.parse(uni.getStorageSync('room'));
				if (room) {
					this.length = room.propertiesnews.length;
					this.room = room;
					setTimeout(() => {
						for (var i = 0; i < 4; i++) {
							let that = this;
							let element = '.top-' + (i + 1);
							const query = uni.createSelectorQuery();
							query.select(element).boundingClientRect();
							query.selectViewport().scrollOffset();
							query.exec(function(res) {
								if (res[0]) {
									that.topArr.push(res[0].top - 44);
								}
							});
						}
					}, 1000);
					this.list = [{
							name: '占地面积',
							name1: room ? room.areacovered + 'm²' : ''
						},
						{
							name: '建筑面积',
							name1: room.rooms ? room.rooms + '-' + room.roomsmax + 'm²' : ''
						},
						{
							name: '容积率',
							name1: room.volume || ''
						},
						{
							name: '规划车位',
							name1: room.planparking || ''
						},
						{
							name: '车位配比',
							name1: room.carpark || ''
						},
						{
							name: '规划楼栋', //?????
							name1: room.weigh || ''
						},
						{
							name: '规划户数',
							name1: room.planhouseholds || ''
						},
						{
							name: '物业公司',
							name1: room.company || ''
						},
						{
							name: '物业费用',
							name1: room.propertyfee || ''
						},
						{
							name: '供电',
							name1: room.electric || ''
						},
						{
							name: '供暖方式',
							name1: room.heating || ''
						},
						{
							name: '供水',
							name1: room.water || ''
						}
					]
					this.datayu = [{
							name: '预售证',
							name1: room.presalepermit || ''
						},
						{
							name: '发证日期',
							name1: room.certificatesdate ? uni.$u.timeFormat(room.certificatesdate, 'yyyy-mm-dd') : ''
						}
					]
				}
			} catch (e) {}
		},
		methods: {
			click(e) {
				let top = e.index === 0 ? this.topArr[e.index] - 25 : this.topArr[e.index];
				uni.pageScrollTo({
					scrollTop: top
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.borderleft {
		border-left: 6rpx solid #0E5543;
		padding-left: 15rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.c1 {
		color: #000000;
	}

	.c2 {
		color: #797979;
	}
	
	.shuxian {
		width: 6rpx;
		height: 40rpx;
		background-color: #0e5642;
		margin-right: 15rpx;
	}
	
	.shuxian-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #0e5642;
		height: 60rpx;
		line-height: 60rpx;
	}
</style>
